<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem" v-permission="'package.add'">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 300px;" placeholder="输入查询关键字按回车" clearable prefix-icon="el-icon-search"
        class="filter-item" @keyup.enter.native="research" @clear="research" v-model="query.queryString"></el-input>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
    </z-table>
    <el-dialog title="包装量创建" width="80%" :visible.sync="editFormVisible" :close-on-click-modal="false">
      <div style="padding-right: 100px;">
        <el-form :model="data" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品" labelWidth='140px' prop="sku_id">
                <el-select style="width:100%" v-model="data.sku_id" placeholder='输入产品' :filterable='true' :remote='true'
                  :remoteMethod='this.getSkuOption' @focus="focusSku">
                  <el-option v-for="i in skuOptions" :key="i.value" :value='i.value' :label="i.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="客户" labelWidth='140px'>
                <el-select style="width:100%" v-model="data.custom_id" placeholder='输入客户' :filterable='true'
                  :remote='true' :remoteMethod='this.getCustOption' @focus="focusCust">
                  <el-option v-for="i in custOptions" :key="i.value" :value='i.value' :label="i.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="" labelWidth='140px'>
                <div class='mt-10 mb-10'>
                  <el-row :gutter="20" type='flex' style="font-size: 12px; margin-bottom: 15px">
                    <el-col :span="4"><label>包装层级</label></el-col>
                    <el-col :span="2"><label>是否启用</label></el-col>
                    <el-col :span="6"><label>包装内数量</label></el-col>
                    <el-col :span="6"><label>包装重量上限</label></el-col>
                    <el-col :span="6"><label>包装重量下限</label></el-col>
                  </el-row>
                  <el-row :gutter="20" class="mb-5" type='flex' v-for="(d, i) in data.details" :key="i">
                    <template v-if="d.show">
                      <el-col :span="4">
                        <el-input v-model='d.package_name' disabled></el-input>
                      </el-col>
                      <el-col :span="2">
                        <el-switch active-value='Y' inactive-value='N' v-model="d.is_enable"
                          @change="changeSwitch($event,d,i)">
                        </el-switch>
                      </el-col>
                      <el-col :span="6">
                        <el-input-number style="width:100%" :disabled='d.is_enable!=="Y"?true:false'
                          :min='d.is_enable!=="Y"?0:1' v-model="d.size" :step='1'>
                        </el-input-number>
                      </el-col>
                      <el-col :span="6">
                        <el-input-number style="width:100%" :disabled='d.is_enable!=="Y"?true:false' :min="0"
                          :step='0.01' v-model="d.weight_max">
                        </el-input-number>
                      </el-col>
                      <el-col :span="6">
                        <el-input-number style="width:100%" :disabled='d.is_enable!=="Y"?true:false' :min="0"
                          :step='0.01' v-model="d.weight_min">
                        </el-input-number>
                      </el-col>
                    </template>
                  </el-row>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="重量单位" labelWidth='140px'>
                <el-select style="width:100%" v-model="data.weight_unit">
                  <el-option v-for="i in weightOptions" :key="i.value" :label="i.label" :value='i.value'></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" labelWidth='140px'>
                <el-input type="textarea" rows="3" v-model="data.remarks"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="text-right">
        <el-button @click="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="submit" :loading="submitLoading">确认
        </el-button>
        <slot name="operation"></slot>
      </div>
    </el-dialog>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <!-- <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog> -->
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'package',
  data: function () {
    return {
      name: '包装量',
      api: this.$api.package,
      pageLoading: false,
      submitLoading: false,
      query: {
        page: 1,
        size: 10,
      },
      list: [],
      total: 0,
      initData: {
        details: [
          {
            package_code: 'package1',
            package_name: '',
            show: false,
            is_enable: 'Y',
          },
          {
            package_code: 'package2',
            package_name: '',
            show: false,
            is_enable: 'Y',
          },
          {
            package_code: 'package3',
            package_name: '',
            show: false,
            is_enable: 'Y',
          },
          {
            package_code: 'package4',
            package_name: '',
            show: false,
            is_enable: 'Y',
          },
          {
            package_code: 'package5',
            package_name: '',
            show: false,
            is_enable: 'Y',
          },
        ],
      },
      data: {},
      rules: {
        sku_id: [{ required: true, message: '', trigger: 'blur' }],
      },
      editFormVisible: false,
      queryParams: {},
      custOptions: [],
      skuOptions: [],
      weightOptions: [
        { value: 'Kg', label: 'kg' },
        { value: 'g', label: 'g' },
        { value: 't', label: 't' },
      ],
      showDetails: [],
      columns: [
        { title: '产品代码', key: 'key_part_no' },
        { title: '产品名称', key: 'sku_name' },
        { title: '客户代码', key: 'cust_code' },
        { title: '客户名称', key: 'cust_name' },
        { title: '重量单位', key: 'weight_unit' },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user' },
        { title: '最后修改', key: 'modify_time' },
      ],
    }
  },
  methods: {
    submit: function () {
      if (!this.data.sku_id) {
        this.$message.error('产品 为必填项')
        return
      }
      this.submitLoading = true
      let url = this.api + 'add'
      this.$request(url, this.data, 'post')
        .then((r) => {
          this.submitLoading = false
          this.$message({
            message: '操作成功',
            type: 'success',
          })
          this.editFormVisible = false
          this.getList()
        })
        .catch(() => {
          this.submitLoading = false
        })
    },
    // 修改Switch
    changeSwitch(flag, item, index) {
      if (flag === 'N') {
        item.size = 0
        item.weight_max = 0
        item.weight_min = 0
        this.$set(this.data.details, index, item)
      } else {
        item.size = 1
        item.weight_max = 0.01
        item.weight_min = 0.01
        this.$set(this.data.details, index, item)
      }
    },
    // 系统参数
    getdetails() {
      this.$request(this.$api.dictionary + 'getdirectchildren', {
        parentType: 'package_level_name',
      }).then((r) => {
        this.showDetails = r
        this.detailsIsShow(this.initData)
      })
    },
    detailsIsShow(data) {
      this.showDetails.forEach((i, t) => {
        data.details[t].show = true
        data.details[t].package_name = i.label
      })
    },
    focusCust() {
      if (!this.custOptions.length) this.getCustOption(' ')
    },
    getCustOption(val) {
      this.custOptions = []
      this.$request(this.$api.custom + 'getlist', {
        queryString: val,
      })
        .then((r) => {
          this.custOptions = r.list.map((i) => {
            return {
              value: i.id,
              label: i.cust_code + ' ' + i.cust_name,
            }
          })
        })
        .catch(() => {})
    },
    getCustOptionOne(val) {
      this.custOptions = []
      this.$request(this.$api.custom + 'getbyid', {
        id: val,
      })
        .then((r) => {
          this.custOptions = [r].map((i) => {
            return {
              value: i.id,
              label: i.cust_code + ' ' + i.cust_name,
            }
          })
        })
        .catch(() => {})
    },
    focusSku() {
      if (!this.skuOptions.length) this.getSkuOption(' ')
    },
    getSkuOption(val) {
      this.skuOptions = []
      this.$request(this.$api.sku + 'getlist', {
        queryString: val,
      })
        .then((r) => {
          this.skuOptions = r.list.map((i) => {
            return {
              value: i.id,
              label: i.key_part_no + ' ' + i.key_part_name,
            }
          })
        })
        .catch(() => {})
    },
    getSkuOptionOne(val) {
      this.skuOptions = []
      this.$request(this.$api.sku + 'getbyid', {
        id: val,
      })
        .then((r) => {
          this.skuOptions = [r].map((i) => {
            return {
              value: i.id,
              label: i.key_part_no + ' ' + i.key_part_name,
            }
          })
        })
        .catch(() => {})
    },
    formatAfterGet(data) {
      //依据实际需求处理
      let tmp = _.cloneDeep(data)
      this.detailsIsShow(tmp)
      this.getCustOptionOne(tmp.custom_id)
      this.getSkuOptionOne(tmp.sku_id)
      return tmp
    },
  },

  created: function () {
    this.getList()
    this.getdetails()
  },
  watch: {
    data: function (val) {},
  },
}
</script>

<style scoped>
</style>
